<template>
  <div class="page-account" :style="'--bg-logo:'+'url('+ login_logo +')'">
    <div class="container" :class="[fullWidth > 768 ? 'containerSamll' : 'containerBig']">
      <swiper :options="swiperOption" class="swiperPross" v-if="fullWidth > 768">
        <img :src="rightBanner" style="object-fit: contain;" alt />
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <div class="index_from page-account-container from-wh">
        <div class="page-account-top">
          <div class="page-account-top-logo">
            <div style="font-size:20px;font-weight:900">Hi~欢迎登录</div>

          </div>
        </div>
        <el-form
          ref="formInline"
          :model="formInline"
          :rules="ruleInline"
          @keyup.enter="handleSubmit('formInline')"
        >
          <el-form-item prop="username">
            <el-input
              class="input"
              type="text"
              v-model="formInline.username"
              placeholder="请输入用户名"
              size="medium"
            >
              <template #prefix>
                <div
                  style="display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;"
                >
                  <div class="iconfont-mxx mxx-yonghudengluguanli" style="color:#a3a3a3;"></div>
                </div>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              class="input"
              type="password"
              v-model="formInline.password"
              placeholder="请输入密码"
              size="medium"
            >
              <template #prefix>
                <div
                  style="display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;"
                >
                  <div class="iconfont-mxx mxx-mima" style="color:#a3a3a3;"></div>
                </div>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item class="pt10 btn-box">
            <el-button
              type="primary"
              long
              :loading="loading"
              size="medium "
              @click="handleSubmit('formInline')"
              class="btn"
            >登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="footer" v-if="copyright_show == 1">
      <div class="pull-right" v-if="copyright">{{ copyright }}</div>
      <div class="pull-right" v-else>
        Copyright © 2014-2024
        <a href="http://www.uxphp.com" target="_blank">{{ version }}</a>
      </div>
    </div>
  </div>
</template>
    <script>
import Setting from '@/settings';

// import { loginInfoApi } from '@/api/account';
import { agentLogin } from '@/api/agent';
import { setCookies } from '@/libs/util';
import { getLoginPicApi } from '@/api/user';


export default {
  components: {
  },
  data() {
    return {
      fullWidth: document.documentElement.clientWidth,
      swiperOption: {
        pagination: '.swiper-pagination',
        autoplay: true,
      },
      loading: false,
      isShow: false,
      autoLogin: true,
      imgcode: '',
      formInline: {
        username: '',
        password: '',
      },
      ruleInline: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
      login_captcha: 0,
      // jigsaw: null,
      login_logo: '',
      rightBanner:'',
      swiperList: [],
      defaultSwiperList: require('@/assets/images/sw.jpg'),
      key: '',
      copyright: '',
      version: '',
      copyright_show: 1,
    };
  },
  created() {
    const _this = this;
    document.onkeydown = function () {
      if (_this.$route.name === 'login') {
        let key = window.event.keyCode;
        if (key === 13) {
          _this.handleSubmit('formInline');
        }
      }
    };
    window.addEventListener('resize', this.handleResize);
  },
  watch: {
    fullWidth(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenWidth = val;
        this.timer = true;
        let that = this;
        setTimeout(function () {
          // 打印screenWidth变化的值
          that.timer = false;
        }, 400);
      }
    },
    $route(n) {
      this.captchas();
    },
  },
  mounted: function () {
    this.$nextTick(() => {
      // /* eslint-disable */
      let that = this;
      this.swiperData();
    });
    this.captchas();
  },
  methods: {
    captchas: function () {
      this.imgcode = Setting.apiBaseURL + '/captcha_pro?' + Date.parse(new Date());
    },
    swiperData() {
      getLoginPicApi().then((res) => {
        this.login_bg = res.backgroundImage;
        console.log(this.login_bg,'login_bg')
        this.rightBanner = res.leftLogo;
        this.login_logo = res.loginLogo;
        this.copyright = res.shoppingAuthorizeInfo;
        window.document.title = res.siteName + ' - 登录';
        localStorage.setItem('platSiteName', res.siteName);
      });
    },
    success(params) {
      this.closeModel(params);
    },
    // 关闭模态框
    closeModel(params) {
      this.isShow = false;
      // noinspection JSVoidFunctionReturnValueUsed
      const loading = this.$loading({
        lock: true,
        text: '正在登录中.',
      });
      this.loading = true;
      this.$store.dispatch('agent/login',{
        loginName: this.formInline.username,
        pwd: this.formInline.password,
      }).then(() => {
        loading.close();

        this.$router.push({
          path: '/agent/home'
        })
      }).catch(() => {
        console.log('登入失败')
        loading.close();

        this.loading = false;
      })

      setTimeout((e) => {
        loading.close();

        this.loading = false;
      }, 1000);
    },
    formatTwoStageRoutes(arr) {
      if (arr.length <= 0) return false;
      const newArr = [];
      const cacheList = [];
      arr.forEach((v) => {
        if (v && v.meta && v.meta.keepAlive) {
          newArr.push({ ...v });
          cacheList.push(v.name);
          this.$store.dispatch('keepAliveNames/setCacheKeepAlive', cacheList);
        }
      });
      return newArr;
    },
    checkSocket() {
      getWorkermanUrl().then((res) => {
        let url = res.data.admin;
        let isNotice = false;
        let socket = new WebSocket(url);
        socket.onopen = () => {
          isNotice = true;
          socket.close();
        };
        socket.onerror = (err) => {
          if (!isNotice) {
            isNotice = true;
            this.$Notice.warning({
              title: '温馨提示',
              desc: '您的【长连接】未开启，没有开启会导致系统默认客服无法使用,后台订单通知无法收到。请尽快执行命令开启！！<a href="https://doc.crmeb.com/single/crmeb_v4/7219" target="_blank">点击查看开启方法</a>',
              duration: 30,
            });
          }
        };
        socket.onclose = (err) => {
          if (!isNotice) {
            isNotice = true;
            this.$Notice.warning({
              title: '温馨提示',
              desc: '您的【长连接】未开启，没有开启会导致系统默认客服无法使用,后台订单通知无法收到。请尽快执行命令开启！！<a href="https://doc.crmeb.com/single/crmeb_v4/7219" target="_blank">点击查看开启方法</a>',
              duration: 30,
            });
          }
        };
      });
    },
    getExpiresTime(expiresTime) {
      let nowTimeNum = Math.round(new Date() / 1000);
      let expiresTimeNum = expiresTime - nowTimeNum;
      return parseFloat(parseFloat(parseFloat(expiresTimeNum / 60) / 60) / 24);
    },

    closefail() {
      if (this.jigsaw) this.jigsaw.reset();
      this.$message.error('校验错误');
    },
    handleResize(event) {
      this.fullWidth = document.documentElement.clientWidth;
      if (this.fullWidth < 768) {
        document.getElementsByTagName('canvas')[0].removeAttribute('class', 'index_bg');
      } else {
        document.getElementsByTagName('canvas')[0].className = 'index_bg';
      }
    },
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.login_captcha == 1) {
            this.$refs.verify.show();
          } else {
            this.closeModel();
          }
        }
      });
    },
  },
  beforeCreate() {
    if (this.fullWidth < 768) {
      document.getElementsByTagName('canvas')[0].removeAttribute('class', 'index_bg');
    } else {
      document.getElementsByTagName('canvas')[0].className = 'index_bg';
    }
  },
  beforeDestroy: function () {
    window.removeEventListener('resize', this.handleResize);
    document.getElementsByTagName('canvas')[0].removeAttribute('class', 'index_bg');
  },
};
</script>
  
    <style scoped lang="stylus">
    >>> .el-input {
      background-color: #F4F6FA !important;
    }

    >>> .el-input::placeholder {
      color: #999;
    }

    >>> .el-button {
      border-radius: 200px;
    }

    >>> .el-input__prefix {
      width: 32px;
      height: 100%;
      text-align: center;
      position: absolute;
      left: 0;
      right: 0;
      z-index: 1;
    }
</style>
    <style scoped lang="stylus">
    .page-account {
      display: flex;
      width: 100%;
      background-image: url('../../../assets/images/bg.png');
      background-size: cover;
      background-position: center;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100vh;
      overflow: auto;
    }

    .page-account:after {
      content: '';
      background-image: var(--bg-logo);
      background-position-x: 50%;
      background-position-y: center;
      background-size: contain;
      background-repeat: no-repeat;
      display: #000;
      position: absolute;
      right: 30px;
      top: 30px;
      width: 120px;
      height: 60px;
    }

    .page-account .code {
      display: flex;
      align-items: center;
      justify-content: center;
      column-gap: 20px;
    }

    .page-account .code .pictrue {
      height: 40px;
    }

    .swiperPross {
      border-radius: 6px;
    }

    .swiperPross, .swiperPic, .swiperPic img {
      width: 360px;
      height: 100%;
    }

    .swiperPic img {
      width: 100%;
      height: 100%;
    }

    .container {
      height: 497px !important;
      padding: 0 !important;
      border-radius: 12px;
      z-index: 1;
      display: flex;
    }

    .containerSamll {
      /* width: 56% !important; */
      /* background: #fff !important; */
      display: flex;
      flex-direction: row-reverse;
      column-gap: 20px;
    }

    .containerBig {
      width: auto !important;
      background: #f7f7f7 !important;
    }

    .index_from {
      padding: 32px 40px 32px 40px;
      height: 100%;
      box-sizing: border-box;
      border-radius: 6px;
      background: #ffffff;
      color: #333;
    }

    .page-account-top {
      padding: 20px 0 24px 0 !important;
      box-sizing: border-box !important;
      display: flex;
      justify-content: center;
    }

    .page-account-container {
      border-radius: 0px 6px 6px 0px;
    }

    .btn {
      background: linear-gradient(90deg, rgba(25, 180, 241, 1) 0%, rgba(14, 115, 232, 1) 100%) !important;
    }

    .captchaBox {
      width: 310px;
    }

    input {
      display: block;
      width: 290px;
      line-height: 40px;
      margin: 10px 0;
      padding: 0 10px;
      outline: none;
      border: 1px solid #c8cccf;
      border-radius: 4px;
      color: #6a6f77;
    }

    .input {
      background: #F4F6FA;
    }

    #msg {
      width: 100%;
      line-height: 40px;
      font-size: 14px;
      text-align: center;
    }

    a:link, a:visited, a:hover, a:active {
      margin-left: 100px;
      color: #0366D6;
    }

    .index_from >>> .el-input__inner {
      background-color: #F4F6FA !important;
      font-size: 14px !important;
      height: 44px;
      border: none;
    }

    .index_from >>> .el-input--medium {
      border-radius: 6px;
      padding: 6px 7px;
    }

    .index_from >>> .el-button--medium {
      width: 100%;
      height: 44px;
    }

    .from-wh {
      width: 470px;
    }

    .pull-right {
      float: right !important;
    }

    .footer {
      position: fixed;
      bottom: 0;
      width: 100%;
      left: 0;
      margin: 0;
      background: rgba(255, 255, 255, 0.8);
      border-top: 1px solid #e7eaec;
      overflow: hidden;
      padding: 10px 20px;
      height: 36px;
      z-index: 999;
      display: flex;
      justify-content: center;
    }

    .pull-right {
      float: right !important;
      color: #666;
    }

    .pull-right a {
      margin-left: 0;
      color: #666;
    }

    .footer {
      position: fixed;
      bottom: 0;
      width: 100%;
      left: 0;
      margin: 0;
      background: rgba(255, 255, 255, 0.8);
      border-top: 1px solid #e7eaec;
      overflow: hidden;
      padding: 10px 20px;
      height: 36px;
    }
</style>
    